<template>
  <div class="login-page">
    <div class="container">
      <div class="left-img">
        <div class="titles">
          <div class="title">Welcome!</div>
          <div class="subTitle">联想教育报名通</div>
        </div>
      </div>
      <div class="right-form">
        <div class="logo-new">
          <!-- <img src="../assets/images/logo1.png" width="300" /> -->
        </div>

        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="form" hide-required-asterisk>
          <el-form-item prop="username">
            <el-input ref="username" v-model="loginForm.username" placeholder="请输入账号(邮箱)" name="username" type="text" tabindex="1" autocomplete="off">
              <template #prefix>
                <svg-icon name="user" slot="prefix" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              show-password
              autocomplete="off"
              @keyup.enter.native="handleLogin"
            >
              <template #prefix>
                <svg-icon name="password" slot="prefix" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="code" class="mb15">
            <el-row>
              <el-col :span="16">
                <el-input v-model="loginForm.code" placeholder="请输入验证码" @keyup.native.enter="handleLogin">
                  <svg-icon name="verifyCode" slot="prefix" />
                </el-input>
              </el-col>
              <el-col :span="8" style="height: 36px">
                <img :src="codeUrl" @click="getCode" class="login-code-img" style="margin-left: 5px" />
              </el-col>

              <!--                  <img ref="captcha" :src="codeUrl" style="width: 130px" @click="getNewCaptcha" />-->
            </el-row>
          </el-form-item>

          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <!--                暂时隐藏忘记密码-->
              <!--                <el-button class="forgetPwd" type="text" @click.prevent="forgetPassword">忘记密码</el-button>-->
            </el-col>
            <el-col :span="15" class="rightBtns">
              <el-button type="text" @click.prevent="gotoNotices" class="reg1">公告/培训材料</el-button>
              <!-- <span style="color: #1890ff">/</span> -->
              <svg-icon name="jiange"></svg-icon>
              <el-button type="text" @click.prevent="individualRegister" class="reg2">个人注册</el-button>
            </el-col>
          </el-row>
          <el-form-item class="mb15"> </el-form-item>

          <el-form-item>
            <el-button class="btn-login" type="primary" @click="handleLogin" :disabled="loading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- <el-card class="notify-card" shadow="hover">
        <div @click="gotoNotices">通知公告</div>
      </el-card> -->
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import md5 from "js-md5";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      title: "报名系统",
      codeUrl: "",
      loginForm: {
        username: "",
        password: "", //
        uuid: "",
        code: "",
      },
      passwordType: "password",
      loading: false,
      redirect: undefined,
      otherQuery: {},
      ruleForm: {
        name: "",
        password: "",
        code: "",
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号(邮箱)", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "change" }],
      },
    };
  },
  watch: {
    // $route: {
    //   handler: function (route) {
    //     const query = route.query;
    //     if (query) {
    //       this.redirect = query.redirect;
    //       this.otherQuery = this.getOtherQuery(query);
    //     }
    //   },
    //   immediate: true,
    // },
  },
  created() {
    const name = sessionStorage.getItem("tempUsername");
    if (name) {
      this.loginForm.username = name;
    }
  },
  mounted() {
    this.getCode();
    if (this.loginForm.username === "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    forgetPassword() {
      this.$router.push("/resetPassword");
    },
    // 单位注册
    institutionalRegister() {
      this.$router.push("/institutionReg");
    },
    // 个人注册
    individualRegister() {
      this.$router.push("/individualReg");
    },
    gotoNotices() {
      this.$router.push("/notices");
    },

    handleLogin() {
      if (this.loading) {
        return;
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          const data = {
            ...this.loginForm,
            password: md5(this.loginForm.password.trim()),
          };
          this.$store
            .dispatch("Login", data)
            .then((data) => {
              this.loading = false;
              console.log("info", data);
              // if (!data) {
              //   return this.$message.error("账号或密码错误");
              // }
              // this.$router.push("/dashboard");
              this.$router.push({ path: "/" }).catch(() => {});
              // this.$router.push({ path: this.redirect || "/" }).catch(() => {});
              this.getCode();
            })
            .catch((err) => {
              // console.log("error", err, err === "验证码错误", typeof err, JSON.stringify(err), Object.prototype.toString.call(err), err.valueOf());
              this.loginForm.code = "";

              this.loading = false;
              this.getCode();
            });
        } else {
          console.log("error submit!!");
          this.getCode();
          return false;
        }
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login-page {
  width: 100%;
  height: 100%;
  // background-image: url("../assets/images/login-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  overflow: auto;
  position: relative;
  :root {
  }
}
.container {
  width: 900px;
  height: 555px;
  display: flex;
  background-color: white;
  border-radius: 25px;

  align-self: center;
  .left-img {
    width: 53%;
    height: 100%;
    // background-image: url("../assets/images/login-left.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    .titles {
      position: relative;
      top: 55px;
      left: 50px;
      color: white;
      .title {
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 1.1px;
      }
      .subTitle {
        margin-top: 18px;
        font-size: 24px;
        letter-spacing: 1px;
      }
    }
  }
  .svg-container {
    padding: 2px 5px 2px 15px;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .right-form {
    width: 47%;
    height: 100%;
    background-color: white;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .logo-new {
      margin-bottom: 25px;
    }
    .form {
      width: 300px;
      .mb15 {
        margin-bottom: 13px;
      }
      .forgetPwd {
        color: #c1c1c1;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        &:hover {
          color: #a4a4a4;
        }
      }

      .rightBtns button {
        color: #0575e6;
        &:hover {
          color: #2c95ffd9;
        }
      }

      ::v-deep .el-input .el-input__prefix {
        left: 8px;
      }
      .login-code-img {
        cursor: pointer;
        height: 36px;
        width: 100px;
      }
    }
  }
}

.btn-login {
  width: 100%;
  border-radius: 20px;
  padding: 12px 20px;
  background-color: #0475e6;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*color: white;*/
  &.is-disabled {
    background-color: #8cc8ff;
  }
  &:hover {
    background: #46a6ff;
    border-color: #46a6ff;
  }
}

.notify-card {
  position: absolute;
  top: 7%;
  right: 7%;
  cursor: pointer;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  -ms-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  border-radius: 10px;
  &:hover {
    opacity: 0.8;
    background-color: #ffffffed;
  }

  ::v-deep .el-card__body {
    padding: 15px;
  }
}
.rightBtns {
  text-align: right;
}
</style>
